<script setup>
import noteCommunal from "@/components/communal/note-communal.vue";
import wangeditorUtil from "@/components/utils/wangeditor-util.vue";
import  writingsUtil  from "@/components/communal/writings-util.vue";

import {ref, inject} from 'vue'
import {getRecentNote, selAllCollectByUuid, selAllNotCollectNote} from "@/res/api/note_api.js";
const {toPage} = inject("toPage")
const form = ref({
  content: ''
})

// 根据用户ID查询收藏夹
let collectRef = ref([])
selAllCollectByUuid({
  pageSize: 1,
  pageNum: 10
}).then((res)=> {
  console.log(res)
  collectRef.value = res.data.list
}).catch((err)=> {
  $message.error(err.message);
})

// 根据用户ID查询未收藏的笔记
let notCollectRef = ref([])
selAllNotCollectNote().then((res)=> {
  console.log(res)
  notCollectRef.value = res.data.list
}).catch((err)=> {
  $message.error(err.message);
})

// 最近编辑
let recentNoteRef = ref([])
function recentNote(){
  getRecentNote({
    pageSize: 1,
    pageNum: 5
  }).then((res)=> {
    // console.log(res)
    recentNoteRef.value = res.data.list
  }).catch((err)=> {
    $message.error(err.message);
  })
}
recentNote()
</script>

<template>
  <note-communal action-key="note-persona">
<!--    收藏夹-->
    <n-flex vertical>
      <n-h2>收藏夹 - 笔记</n-h2>
      <n-grid x-gap="18" y-gap="8" :cols="4">
        <n-gi v-for="(item, index) in collectRef" :key="index">
          <n-card hoverable @click="toPage('std/note/show/collect', {id: item.id, type:'note'})">
            <n-space vertical>
              <n-p>{{ item.collectName }}</n-p>
              <n-ellipsis xpand-trigger="click" :line-clamp="2" :tooltip="false" :style="{fontsize:'1rem'}">
                便捷保存和管理喜爱或常用的笔记/文章，快速访问，提升效率。
              </n-ellipsis>
            </n-space>
          </n-card>
        </n-gi>
      </n-grid>
      <n-divider/>
    </n-flex>
<!--    未分组的笔记-->
    <n-flex vertical>
      <n-h2>未分组的笔记</n-h2>
      <n-grid x-gap="12" y-gap="8" :cols="4">
        <n-gi v-for="(item, index) in notCollectRef" :key="index">
          <n-card hoverable @click="toPage('std/note/write',{noteId:item.id,isCreate:false}, false)"
                  style="height: 15rem">
            <template #cover>
              <n-image width="100" :src="item.noteimg" preview-disabled/>
            </template>
            <n-space vertical>
              <n-p>{{ item.notetitle }}</n-p>
              <n-ellipsis xpand-trigger="click" :line-clamp="2" :tooltip="false" :style="{fontsize:'1rem'}">
                便捷保存和管理喜爱或常用的笔记/文章，快速访问，提升效率。
              </n-ellipsis>
            </n-space>
          </n-card>
        </n-gi>
      </n-grid>
      <n-divider/>
    </n-flex>
<!--    编辑记录-->
    <n-flex vertical>
      <p class="note-title">文档 document</p>
      <n-space >
        <n-button text >
          <template #icon>
            <n-icon>
              i
            </n-icon>
          </template>
          最新编辑
        </n-button>
      </n-space>
    </n-flex>

    <n-list  hoverable clickable class="ant">
      <n-list-item>
        <n-space justify="space-between">
          <n-p>名称</n-p>
          <n-p>创建时间</n-p>
          <n-p>编辑时间</n-p>
        </n-space>
      </n-list-item>
      <n-list-item v-for="(item,index) in recentNoteRef" :key="index">
        <n-space justify="space-between">
          <n-p>{{ item.notetitle }}</n-p>
          <n-p><n-time :time="item.createTime" format="yyyy-MM-dd hh:mm:ss" /></n-p>
          <n-p><n-time :time="item.updateTime" format="yyyy-MM-dd hh:mm:ss" /></n-p>
        </n-space>
      </n-list-item>
    </n-list>


  </note-communal>
</template>

<style lang="scss" scoped>
$base-li-withe: 10%;
.personal-left{
  background: #1296db;

}
.personal-main{
  width: 81vw;
  min-height: 100vh;
}
.personal-right{
  background: #1296db;

}
.note-title{
  font-weight: bold;
  font-size: 16px;
}
.ant{
  transition: .72s 0s ease-in-out all;
  animation-name: ant;
  animation-duration: 1s;
  animation-delay: 0.24s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

</style>
